<template>
  <div class="home">
    <div style="width: 100%;position: fixed;top: 0;">
      <van-search
        v-model="value"
        shape="round"
        @input="inputValue"
        @search="enter"
        placeholder="请输入小区名或地址"
      />
    </div>
    <!-- 自动补全 -->
    <div class="home_completion" v-show="isShow">
      <p v-for="(item,index) in completion" :key="index" @click="back(item)" v-html="html(item)"></p>
    </div>
    <div class="home_histroy">
      <h3>
        搜索历史
        <span @click="del(index)">删除</span>
      </h3>
      <div class="home_histroy_list">
        <span v-for="(item,index) in hotHistroy" :key="index">{{item}}</span>
      </div>
    </div>
    <div class="home_hot">
      <h3>热门搜索</h3>
      <div class="home_hot_list">
        <span v-for="(item,index) in list" :key="index">{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Home",
  components: {},
  data() {
    return {
      value: "",
      list: [
        "家",
        "学校",
        "二手房"
      ], //搜索热词
      hotHistroy: [], //搜索历史
      completion: [], //自动补全
      isShow: false, //同步
      showLIst: []
    };
  },
  mounted() {
    // 初始化
    let hotHistroy = localStorage.hotHistroy;
    if (hotHistroy != null || hotHistroy != undefined) {
      this.hotHistroy = JSON.parse(hotHistroy);
    }
  },
  methods: {
    // 替换
    html(val) {
      var ss = val.replace(
        this.value,
        `<font style="color:orange">${this.value}</font>`
      );
      return ss;
    },
    // 输入框改变的事件
    inputValue() {
      // 判断输入框的输入的内容，是否不等于0 ，如果不等于0 的时候，就让自动补全出现，否则就隐藏
      if (this.value.length != 0) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      //   // 拿到自动补全的接口数据
      this.$axios.get("/goods.json").then(res => {
        this.showLIst = res.data.list;
        this.completion = [];
        this.showLIst.forEach(ele => {
          if (ele.title.includes(this.value)) {
            this.completion.push(ele.title);
          }
        });
      });
    },
    // 确定搜索框的时候和回车的时候
    enter() {
      let value = this.value;
      this.$router.push({
        path: "/",
        query: {
          value
        }
      });
      // // 自动补全的内容隐藏
      this.isShow = false;
      // 判断搜索的输入框为空的时候，不让添加
      if (this.value == "") {
        return;
      }
      // 判断去重  遍历hotHistroy，使用findIndex,如果第一次输入的值，第二次再次输入，返回的下标
      var i = this.hotHistroy.findIndex(ele => {
        return ele == this.value;
      });
      // 如果第一次的话，下标是-1，如果下标不是-1的话，就删除当前的元素
      if (i != -1) {
        this.hotHistroy.splice(i, 1);
      }
      // 将输入框的值添加到最前面
      this.hotHistroy.unshift(this.value);
      // 清空输入框
      this.value = "";
      // 判断hotHistroy的长度，是否是大于10，如果大于就删除最后一个值
      if (this.hotHistroy.length > 4) {
        this.hotHistroy.pop();
      }
      localStorage.setItem('hotHistroy',JSON.stringify(this.hotHistroy))
    },
    back(item) {
      this.isShow = false;
      this.value = "";
      this.hotHistroy.unshift(item);
      localStorage.setItem('hotHistroy',JSON.stringify(this.hotHistroy))
    },
    // 清空数据
    del(index){
      this.hotHistroy = [];
      localStorage.setItem('hotHistroy',JSON.stringify(this.hotHistroy))
    }
  }
};
</script>

<style scoped>
.home_hot {
  width: 100%;
}
.home_hot h3 {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-indent: 10px;
  margin-bottom: -5px;
}
.home_hot_list {
  width: 100%;
}
.home_hot_list span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 20px;
  border: 1px solid #eeeeee;
  background-color: whitesmoke;
  margin-top: 10px;
  margin-left: 10px;
  /* border-radius: 20px; */
}
.home_histroy {
  width: 100%;
  margin-top: 54px;
}
.home_histroy h3 {
  text-indent: 10px;
}
.home_histroy h3 span {
  float: right;
  font-weight: normal;
  margin-right: 20px;
}
.home_histroy_list {
  width: 100%;
}
.home_histroy_list span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 20px;
  border: 1px solid #eeeeee;
  background-color: whitesmoke;
  margin-top: 10px;
  margin-left: 10px;
  /* border-radius: 20px; */
}
.home_completion {
  width: 100%;
  height: 700px;
  background-color: white;
}
.home_completion p {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-indent: 10px;
  border-bottom: 1px solid #eeeeee;
}
</style>